<script setup lang="ts">
const props=defineProps<{
  domains:any[],
  limit?:number,
  isShowMore?:boolean
}>()
const domains=computed(()=>{
  const tmp= Array.isArray(props.domains)?props.domains:Object.values(props.domains)
  if(props.limit){
    return tmp.slice(0,props.limit)
  }else{
    return tmp
  }
})
</script>

<template>
<div class="mx-auto">
  <div class="w-[1200px] mx-auto">
    <slot>
      <div class="text-center mt-10 text-[36px]">新老用户同享，热销门后缀供你选购</div>
      <div class="text-center mt-5 mb-12 text-base text-[#808080]">蓝名提供多个顶级域名后缀，多种优惠套餐供您选择</div>
    </slot>
    <div class="grid grid-cols-4 gap-3">
      <div class="mb-4 active " v-for="(item,key,index) in domains">
        <div class="bg-white rounded-[20px] px-3 pt-14 pb-5">
          <div class="flex justify-center text-[24px]">{{ item.domain}}<div class="w-[51px] h-[25px] ml-[15px]"><img src="~/assets/imgs/domain-hot.png"></div></div>
          <div class="mt-5 text-sm text-center">全球广泛流行，注册量最高的域名</div>
          <div class="flex bg-[#F4FAF5] w-[] my-5 justify-between px-[30px] py-3.5">
            <div class="my-4  space-border pr-[50px] ">
              <div class="text-[#505050] mb-3 text-sm font-bold">￥{{ item.price1 }}/年</div>
              <div class="text-[#969696] text-base" >续费价格</div>
            </div>
            <div class="my-4">
              <div class="text-[#505050] mb-3 text-sm font-bold">￥{{ item.price2 }}/年</div>
              <div class="text-[#969696] text-base">转入价格</div>
            </div>
          </div>
          <div class="mb-3">
            <div class="mb-2"><span class="text-[15px] text-[#FE5643]">¥</span><span class="text-[28px] text-[#FE5643]">{{ item.price[1] }}</span><span class="text-[15px]">/首年</span></div>
            <div class="text-[#969696]">日常价:￥{{ item.price[0] }}/年</div>
          </div>
          <div class="h-[47px] text-center text-white submit" ><NuxtLink :to="`/register.html?suffix=${item.domain}`">立即注册</NuxtLink></div>
        </div>
      </div>
      <div class="mb-4 active active-more text-[var(--el-color-primary)] px-5 relative" v-if="props.isShowMore">
        <div class="text-center text-[29px] font-bold mt-[50px]">域名大优惠</div>
        <div class="text-center text-base w-[176px] mx-auto mt-7">域名大优惠-活动进行时,域名优惠，福利多多，抢到就是赚到，手快有手慢无，速度查看注册你喜欢的域名</div>
        <div class="h-[47px] text-center text-white submit absolute bottom-5 left-2.5 right-2.5" ><NuxtLink to="/allDomainActive.html">查看更多</NuxtLink></div>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.space-border{
  border-right: 1px solid var(--el-border-color);
}
.submit{
  //width: 100%;
  line-height: 47px;
  background-image: url("~/assets/imgs/submit.png");
  background-size: 100% 100%;
}
:hover.active{
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.09);
  transition: all 0.3s;
  transform: scale(1.01);
}
.active-more{
  background-image: url("/imgs/activeMore.jpg");
  background-size: 100% 100%;
}
</style>